import { useMemo } from "react"
import { useComponentConfigStore } from "../../editor/stores/component-config"
import MaterailItem from "../MaterialItem"

const Materail = () => {
  const { componentConfig } = useComponentConfigStore()

  const components = useMemo(() => {
    return Object.values(componentConfig).filter((item) => item.name !== "Page")
  }, [componentConfig])

  return (
    <div className="flex flex-wrap">
      {components.map((item, index) => {
        return (
          <MaterailItem
            name={item.name}
            key={item.name + index}
            desc={item.desc}
          />
        )
      })}
    </div>
  )
}

export default Materail
